<template>
	<div class="box">
		<Title name="积分商城"></Title>
		<view class="show">
			<image src="../../static/img/bbb.gif" mode=""></image>
		</view>
		
		<view class="main">
			<view class="title">
				<view class="bar"></view>
				<text>兑换商城</text>
			</view>
			
			<view class="item-list">
				<view class="item" v-for="item in itemlist">
					<image :src="item.img" mode=""></image>
					<view class="content">
						<view class="top">{{item.desc}}</view>
						<view class="bottom">
							<view class="left">{{item.value}}积分</view>
							<view class="right" @click="buy(item.id)">
								<image src="../../static/img/duihuan.png" mode=""></image>
								<text>兑换</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	import Title from "../components/title.vue"
	export default {
		data () {
			return {
				itemlist: []
			}
		},
		components: {
			Title
		},
		methods: {
			buy () {
				console.log("??")
				let that = this
				uni.showModal({
					title: "提醒",
					content: "确认要兑换该商品吗",
					async success (gId) {
						let res = await uni.request({
							url: that.$config.basisIP,
							method: "POST",
							data: {
								fun: "buy_goods",
								username: "22222",
								id: gId
							},
							header: {
								"content-type": "application/x-www-form-urlencoded"
							}
						})
						
						res = res[1].data
						if (res.code === 200) {
							uni.showToast({
								title: "兑换成功",
								image: "../../static/img/tubiao8-.png"
							})
						} else {
							uni.showToast({
								title: res.result,
								image: "../../static/img/tubiao8-.png"
							})
						}
					},
					fail () {}
				})
			}
		},
		async created () {
			let res = await uni.request({
				url: this.$config.basisIP,
				method: "POST",
				data: {
					fun: "integral_goods",
				},
				header: {
					"content-type": "application/x-www-form-urlencoded"
				}
			})
			
			res = res[1].data
			
			if (res.code === 200) this.itemlist = res.result
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		background-color: #fff;
		padding: 0 45rpx;
		
		.show {
			margin-top: 30rpx;
			height: 288rpx;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 5px;
				box-shadow: $viewShadow;
			}
		}
		
		.main {
			
			.title {
				display: flex;
				align-items: center;
				margin: 30rpx 0;
				
				.bar {
					width: 2px;
					height: 60rpx;
					background-color: $yellow;
				}
				
				text {
					font-size: 32rpx;
					font-weight: bold;
					margin-left: 30rpx;
				}
			}
		
			.item-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				
				.item {
					margin-bottom: 20rpx;
					image {
						width: 310rpx;
						height: 197rpx;
					}
					
					.content {
						.top {
							font-size: $smallFont;
							color: $subColor;
						}
						
						.bottom {
							margin-top: 10rpx;
							display: flex;
							justify-content: space-between;
							
							.left {
								font-size: 25rpx;
								color: #FF3A30;
							}
							
							.right {
								display: flex;
								align-items: center;
								
								image {
									width: 36rpx;
									height: 36rpx;
								}
								
								text {
									font-size: $smallFont;
									color: $subColor;
									margin-left: 10rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
